<script setup>
import {ref} from "vue";
import {showToast} from "vant";

// defineProps({
//   loading: Boolean
// })
const loading = ref(false)
const emit = defineEmits(['onRefreshItem'])

function onRefresh() {
  setTimeout(() => {
    showToast('刷新成功');
    emit('onRefreshItem')
    loading.value = false;
  }, 1000);
}


</script>

<template>
  <van-pull-refresh v-model="loading" :head-height="80" @refresh="onRefresh" style="min-height: 100vh;">
    <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
    <template #pulling="props">
      <img
          class="doge"
          src="http://p1.hoopchina.com.cn/personPic/9e5a6802-b4bb-463c-b57a-5484a42c11c0.jpg"
          :style="{ transform: `scale(${props.distance / 80})` }"
      />
    </template>

    <!-- 释放提示 -->
    <template #loosing>
      <img
          class="doge"
          src="http://p1.hoopchina.com.cn/personPic/53b8ebd0-a9b4-40c5-904c-0d58bac3363f.gif"
      />
    </template>

    <!-- 加载提示 -->
    <template #loading>
      <img
          class="doge"
          src="http://p1.hoopchina.com.cn/personPic/ce4426ed-6f49-48dc-8e31-a423935be922.jpg"
      />
    </template>
    <slot></slot>
  </van-pull-refresh>
</template>

<style scoped>
.doge {
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}

.van-pull-refresh {
  :deep(.van-pull-refresh__track) {
    width: 100%;
    min-height: 94vh;
  }
}
</style>